﻿@page "/collapse"

<PageTitle Title="伸缩面板(BootCollapse)">
    可以通过折叠控件对某些部分进行折叠伸缩显示。
</PageTitle>

<PresentationPart Title="简单示例">
    <Description>@Code.GetCode("> 通过使用 `@ref` 将声明的 `BootCollapse` 对象和元素进行绑定，之后可以在适合的地方调用 `Expand` 展开面板，调用 `Collapse` 方法收缩面板，或调用 `Toggle` 方法自动切换伸缩状态。")</Description>
    <RunTemplate>
        <BootButton OnClick="@(()=>collapsePanel.Toggle())">
            点击呈现内容
        </BootButton>
        <BootCollapse @ref="collapsePanel" AdditionalCssClass="mt-3 border p-3">
            这里是伸缩才能看见的内容
        </BootCollapse>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootButton OnClick=""@(() => collapsePanel.Toggle())"">
点击呈现内容
</BootButton>
<BootCollapse @ref=""collapsePanel"" AdditionalCssClass=""mt-3 border p-3"">
这里是伸缩才能看见的内容
</BootCollapse>
```
```cs
@code {
BootCollapse collapsePanel = new BootCollapse();
}
```
        ")
    </CodeTemplate>
</PresentationPart>

@code {
    BootCollapse collapsePanel = new BootCollapse();
}


<PresentationPart Title="多个折叠面板">
    <Description></Description>
    <RunTemplate>
        <BootButton OnClick="@(()=>panel1.Toggle())">
            点击第一个伸缩面板
        </BootButton>
        <BootCollapse @ref="panel1" AdditionalCssClass="mt-3 border p-3">
            伸缩面板1
        </BootCollapse>
        <BootButton OnClick="@(()=>panel2.Toggle())">
            点击第二个伸缩面板
        </BootButton>
        <BootCollapse @ref="panel2" AdditionalCssClass="mt-3 border p-3">
            伸缩面板2
        </BootCollapse>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootButton Text=""点击第一个伸缩面板"" OnClick=""@(() => panel1.Toggle())"">
点击第一个伸缩面板
</BootButton>
<BootCollapse @ref=""panel1"" AdditionalCssClass=""mt-3 border p-3"">
伸缩面板1
</BootCollapse>
<BootButton Text=""点击第二个伸缩面板"" OnClick=""@(()=>panel2.Toggle())"">
点击第二个伸缩面板
</BootButton>
<BootCollapse @ref=""panel2"" AdditionalCssClass=""mt-3 border p-3"">
伸缩面板2
</BootCollapse>
```
```cs
@code{
BootCollapse panel1 = new BootCollapse();
BootCollapse panel2 = new BootCollapse();
}
```
")
    </CodeTemplate>
</PresentationPart>
@code{
    BootCollapse panel1 = new BootCollapse();
    BootCollapse panel2 = new BootCollapse();
}

<ArgumentDescriptionTable Title="属性">
    <tr>
        <td>IsExpanded</td>
        <td>Boolean</td>
        <td>获取一个布尔值，表示面板是否处于展开状态。</td>
    </tr>
</ArgumentDescriptionTable>

<ArgumentDescriptionTable Title="事件">
    <tr>
        <td>OnExpanded</td>
        <td>EventCallback&lt;bool></td>
        <td>设置当面板展开时触发的事件。</td>
    </tr>
    <tr>
        <td>OnCollapsed</td>
        <td>EventCallback&lt;bool></td>
        <td>设置当面板收缩时触发的事件。</td>
    </tr>

</ArgumentDescriptionTable>
<ArgumentDescriptionTable Title="方法">
    <tr>
        <td>Expand</td>
        <td>Task</td>
        <td>对伸缩面板进行展开操作。</td>
    </tr>
    <tr>
        <td>Collapse</td>
        <td>Task</td>
        <td>对面板进行收缩操作。</td>
    </tr>
</ArgumentDescriptionTable>